<template>
  <div class="cutPriceList">
    <!--分享提示弹窗,已封装成组件-->
    <shareToast :share='showShare' @close-share='closeShare'></shareToast>
    <div class="header">
        <x-header title="车网通砍价" :left-options="{backText:''}" class="whiteHeader">
          <img src="../../assets/image/group/share.png" class="wx" slot='right' @click.stop='showShareClick'>
        </x-header>
        <!--导航栏-->
        <div class="cutPriceNav">
          <tab v-model="selectIndex">
            <tab-item selected @on-item-click="onItemClick">砍价商品</tab-item>
            <div class="tabLine"></div>
            <tab-item @on-item-click="onItemClick">我的砍价</tab-item>
          </tab>
        </div>
    </div>
    <!--砍价商品列表-->
    <div class="cutPriceGoodsList">
      <scroller :on-infinite="infinites1" ref='myScroller1' class='myScroller1' :loadingLayerColor='loadColor'>
        <div class="cutList" v-show='selectIndex==0'>
          <div class="cutPriceBanner" v-for='(item,index) in bannerData' :key="index">
            <img :src="item.MEDIAPATH" alt="" />
          </div>
          <!--本期砍价-->
          <div class="cutPriceListNow" v-if="nowCuptData!=''&&nowCuptData.length!=0">
            <div class="cutPriceListNowTitle">
                <img src="../../assets/image/cutPrice/nowPrice.png" alt="" />
            </div>
            <div class="cutPriceListNowInfo" v-for='(item,index) in nowCuptData' @click="goCutPrice(item.SERVDETAIL_ID)" :key="index">
              <div class="cutPriceListNowInfo1">
                <img :src="item.SERV_DETAIL_PHOTO" alt="" />
                <div class="cutPriceListNowDeposit">
                  <p :class="{
                      deposit1:item.STOCK<10,
                      deposit2:item.STOCK>=10&&item.STOCK<100,
                      deposit3:item.STOCK>=100&&item.STOCK<1000,
                      deposit4:item.STOCK>=1000
                      }">
                      剩余库存:&thinsp;{{item.STOCK}}
                  </p>
                </div>
              </div>
              <div class="cutPriceListNowInfo2">
                  <div class="cutPriceListNowInfo2Left">
                      <p>{{item.SERV_DETAIL_NAME}}</p>
                      <div>
                        <span>最低砍购价:</span>
                        <p>
                          <span>￥</span>
                          <span>{{Number(item.END_PRICE)|filterMoney}}</span>
                          <span>.{{Number(item.END_PRICE)|filterMoney1}}</span>
                        </p> &nbsp;
                        <p>￥{{Number(item.START_PRICE).toFixed(2)}}</p>
                      </div>
                  </div>
                  <p @click.stop="goCutPrice(item.SERVDETAIL_ID)">立即开砍</p>
              </div>
            </div>
          </div>
          <!--往期砍价-->
          <div class="cutPriceListPast" v-if="pastCuptData!=''&&pastCuptData.length!=0">
            <div class="cutPriceListPastTitle">
                <img src="../../assets/image/cutPrice/pastPrice.png" alt="" />
            </div>
            <div class="cutPriceListPastInfo" v-for='(item,index) in pastCuptData' @click="lookCutPrice(item.SERVDETAIL_ID)" :key="index">
                <div class="cutPriceListPastInfo1">
                  <img :src="item.SERV_DETAIL_PHOTO" alt="" />
                  <div class="cutPriceListPastDeposit">
                    <p :class="{
                    joinNum1:item.SALE_COUNT<10,
                    joinNum2:item.SALE_COUNT>=10&&item.SALE_COUNT<100,
                    joinNum3:item.SALE_COUNT>=100&&item.SALE_COUNT<1000,
                    joinNum4:item.SALE_COUNT>=1000
                    }">
                    参与人数:&thinsp;{{item.SALE_COUNT}}
                    </p>
                  </div>
                </div>
                <div class="cutPriceListPastInfo2">
                  <div class="cutPriceListPastInfo2Left">
                    <p>{{item.SERV_DETAIL_NAME}}</p>
                    <div>
                      <span>最低砍购价:</span>
                      <p>
                        <span>￥</span>
                        <span>{{Number(item.END_PRICE)|filterMoney}}</span>
                        <span>.{{Number(item.END_PRICE)|filterMoney1}}</span>
                      </p> &nbsp;
                      <p>￥{{Number(item.START_PRICE).toFixed(2)}}</p>
                      </div>
                  </div>
                  <p @click.stop="lookCutPrice(item.SERVDETAIL_ID)">查看砍价</p>
                </div>
            </div>
            <div class="cutPriceListNo" v-show="finished">
                <div class="noMoreLine"></div>
                <span>没有更多了哟</span>
            </div>
          </div>
          <!--往期砍价无数据-->
          <div class="noCutPriceListPast" v-if='noPast'>
              <div class="cutPriceListPastTitle">
                  <img src="../../assets/image/cutPrice/pastPrice.png" alt="" />
              </div>
              <p>暂无往期砍价数据</p>
          </div>
        </div>
        <!--我的砍价-->
        <div class="myCutPrices" v-show='selectIndex==1'>
            <div class="myCutPriceLists" v-for="(item,index) in myCutpData" :key="index">
              <div class="myCutPriceInfo" @click="toMyCutDetail(item)">
                <div class="myCutPriceInfoL">
                    <img :src="item.SERV_DETAIL_PHOTO" alt="" />
                </div>
                <div class="myCutPriceInfoR">
                    <p>{{item.SERV_DETAIL_NAME}}</p>
                    <p>已砍至:￥{{Number(item.PRICE).toFixed(2)}}&nbsp;&nbsp;共有{{item.BARGAIN_USER_NUM}}人帮砍</p>
                    <p class="myCutPriceInfoRc" v-if="item.BARGAIN_SATUS==2">库存:&nbsp;{{item.STOCK}}件</p>
                    <P class="myCutPriceInfoRd" v-if="item.BARGAIN_SATUS==1">支付金额:<span>￥{{item.PRICE|keepTwoDot}}</span></P>
                </div>
                <div class="myCutPriceInfoLine"></div>
              </div>
              <div class="myCutPriceStatus1" v-if="item.BARGAIN_SATUS==2">
                <p>砍价中</p>
                <p @click="toPay(item.ORDER_ID)">去支付&nbsp;(还剩&thinsp; {{item.times}} )</p>
              </div>
              <div class="myCutPriceStatus2" v-else-if="item.BARGAIN_SATUS==0 ">
                <p>砍价已失效</p>
                <p @click="toCutpriceDetail(item.ORDER_ID)">砍价详情</p>
              </div>
              <div class="myCutPriceStatus3" v-else-if="item.BARGAIN_SATUS==1">
                <p>已完成</p>
                <p @click="toCutpriceDetail(item.ORDER_ID)">砍价详情</p>
                <p @click="toOrderDetail(item.SERV_ORDER_ID)">订单详情</p>
              </div>
              <div class="myCutPriceListBlank"></div>
            </div>
            <div class="myPriceListNo" v-if='noData'>
              <div class="noMoreLine"></div>
              <span>没有更多了哟</span>
            </div>
            <div class="noMyCutcont" style="margin-top:1rem;font-size:.5rem;color:#666;" v-if='noMyCutp'>
              <img src="../../assets/image/cutPrice/icon_empty.png" alt="">
              <p>暂无数据</p>
            </div>
        </div>
      </scroller>
    </div>
    
  </div>
</template>
<script>
/*砍价列表*/
import { XHeader, Tab, TabItem } from "vux";
import {setCookie,getCookie,reloads,appid,pushStateUrl,iosAdroidWx} from "../../util/commonUtils";
import shareToast from "../../components/shareToast.vue"; //分享弹窗组件
import wx from "weixin-js-sdk"; //微信jssdk
export default {
  name: "cutPriceList",
  // 数据
  data() {
    return {
      userId: "",
      showShare: false, //分享弹框
      bannerData: "", //广告位数据
      nowCuptData: "", //本期砍价数据
      pastCuptData: "", //往期砍价数据
      finished: false, //往期砍价是否完成加载
      myCutpData: "", //我的砍价列表
      timestamp: "", //砍价中的剩余时间
      page1: 1, //往期砍价页数
      page2: 1, //我的砍价页数
      noMyCutp: false, //我的砍价是否有数据
      noData: false, //我的砍价数据是否加载完成
      noPast: false, //无往期数据
      loadColor:'#fff',
      orderList: "", // 商品的的列表
      orderId:"", // 商品id
      cutStatebol: false, // 定时器为0时 未支付商品 砍价状态切换
      closeTime: '', // 支付结束时间
      selectIndex:0,  //选择的的tab索引0-砍价商品 1-我的砍价
      showShareObj: '', // 分享需要的数据
    };
  },
  // 计算属性
  computed: {
  },
  // 创建（实例创建完成）
  created() {
    this.userId = getCookie("loginkey");
    if (sessionStorage.getItem("reload")) {
      sessionStorage.removeItem("reload");
    } else {
      sessionStorage.setItem("reload", 1);
      pushStateUrl();
      reloads();
      return;
    }
    this.getConfig();
    // this.getPeriod();
  },
  // el被创建，并挂载到实例上
  mounted() {
     this.$nextTick(function () {
    // 代码保证 this.$el 在 document 中
      this.getPeriod();
    })
  },
  // 方法（实例中的方法）-----------
  methods: {
    // 加载本期砍价 和 砍价列表广告位
    getPeriod(){
      //砍价列表广告位
      this.loadColor='#fff';
      this.$vux.loading.show({
       text: ''
      });
      this.$fetchPost("/CommonService/getGrouponRegion", {
        REGION: "深圳",
        CATEGORY: "BARGAIN_IMAGES"
      }).then(
        res => {
          if (res.STATUS_CODE == 1) {
            this.bannerData = res.REGIINADVS;
          }
        },
        err => console.log(err)
      );
       //本期砍价
      this.$fetchPost("/Bargain/getBargainGoodsListByType", {
        TYPE: 1,
        PAGE_NO: 1,
        PAGE_SIZE: 10
      }).then(
        res => {
          if (res.STATUS_CODE == 1) {
            this.$vux.loading.hide();
            this.nowCuptData = res.BARGARIN_GOODS_LIST;
          }
        },
        err => console.log(err)
      );
    },
    //tab切换
    onItemClick(index) {
      this.selectIndex = index;  //选择的的tab索引
      let that=this;
      if(index==1&&!this.userId){
        this.$vux.confirm.show({
            title:'提示',
            content:'亲，请登录',
            onConfirm () {
                that.$router.push('/login');
            }
        })
        this.selectIndex=0;
      }else{
        if(this.page2==1){
          this.getinfinites2();
        }
      }
    },
    //分享按钮
    showShareClick() {
      this.$fetchPost('specialShare/getShareSetInfo',{TYPE:4}).then(res => {
        if(res.STATUS_CODE ==1){
          this.showShareObj = res
        }
      },
      err => console.log(res)
      )
      this.showShare = true;
    },
    //关闭分享弹窗
    closeShare() {
      this.showShare = false;
    },
    //去砍价
    goCutPrice(id) {
      this.$router.push("/shopDetail/"+id);
    },
    //查看砍价
    lookCutPrice(id) {
      this.$router.push({path:"/shopDetail/"+id,query:{showbol: true}});
    },
    infinites1(){
      if(this.selectIndex==0){
        if(this.page1==1){
          this.getinfinites1();
        }else{
          this.getMoreinfinites1();
        }
      }else if(this.selectIndex==1&&this.userId){
        if(this.page2==1){
           return
        }else{
          this.getMoreinfinites2()
        }
      }
    },
    //往期砍价数据加载(第一次)
    getinfinites1() {
      this.loadColor='#fff';
      this.$vux.loading.show({
       text: ''
      });
      this.$fetchPost("/Bargain/getBargainGoodsListByType",{
        TYPE: 0,
        PAGE_NO: this.page1,
        PAGE_SIZE: 10
      }).then(res=>{
        if(res.STATUS_CODE==1){
          this.$vux.loading.hide();
          this.pastCuptData = res.BARGARIN_GOODS_LIST;
          if(res.BARGARIN_GOODS_LIST.length<10){
            this.loadColor='#aaa';
            this.$refs.myScroller1.finishInfinite(2);
            if(res.BARGARIN_GOODS_LIST.length==0){
              this.noPast = true;
            }else{
              this.finished = true;
            }
          }else{
            this.page1++;
            this.$refs.myScroller1.finishInfinite();
          }
        }
      })
    },
    // 往期更多数据  上拉加载
    getMoreinfinites1(){
       if(this.page1=1){
        return;
      }
      this.loadColor='#aaa';
      this.$fetchPost("/Bargain/getBargainGoodsListByType",{
        TYPE: 0,
        PAGE_NO: this.page1,
        PAGE_SIZE: 10
      }).then(res=>{
        if(res.STATUS_CODE==1){
          this.pastCuptData = this.pastCuptData.concat(res.BARGARIN_GOODS_LIST)
          if(res.BARGARIN_GOODS_LIST.length<10){
              this.finished = true;
              this.$refs.myScroller1.finishInfinite(2);
          }else{
            this.loadColor='#666';
            this.$refs.myScroller1.finishInfinite();
          }
          this.page1++;
        }
      })
    },
    //我的砍价数据加载 (第一次)
    getinfinites2() {
      this.$vux.loading.show({
       text: ''
      });
      this.$fetchPost("/Bargain/getUserBargainGoodsList", {
          USER_ID: this.userId,
          PAGE_NO: this.page2,
          PAGE_SIZE: 3
        }).then( res => {
          if (res.STATUS_CODE == 1) {
            this.$vux.loading.hide();
            // if(!this.myCutpData){
	          this.myCutpData=res.BARGARIN_ORDER_LIST;
            // }
            //查询结束时间
            setInterval(()=> {
              this.downCount();
            },500);
            if (res.BARGARIN_ORDER_LIST.length < 3){
              this.$refs.myScroller1.finishInfinite(2);
              if(res.BARGARIN_ORDER_LIST.length==0){
                this.noMyCutp = true;
                this.loadColor='#fff';
              }else{
                this.noData = true;
              }
            }else{
              this.page2++;
              this.$refs.myScroller1.finishInfinite();
              this.loadColor='#666';
            }
          }
          
        },
        err => console.log(err)
      );
    },
    //我的砍价数据加载 上拉刷新
    getMoreinfinites2(){
      if(this.page2==1){
        return;
      }
      this.loadColor='#aaa';
      this.$fetchPost("/Bargain/getUserBargainGoodsList", {
          USER_ID: this.userId,
          PAGE_NO: this.page2,
          PAGE_SIZE: 3
        }).then( res => {
          if (res.STATUS_CODE == 1) {
            this.myCutpData = this.myCutpData.concat(res.BARGARIN_ORDER_LIST);
            // this.downCount();
            if (res.BARGARIN_ORDER_LIST.length < 3){
              this.noData = true;
              this.$refs.myScroller1.finishInfinite(2);
            }else{
              this.$refs.myScroller1.finishInfinite();
            }
            this.page2++;
          }
        },err=>{
          console.log(err)
        })
    },
    //倒计时
    downCount() {
      for (var i = 0; i < this.myCutpData.length; i++) {
        var times = new Date().getTime();
        let day = 0;
        let H = 0;
        let M = 0;
        let S = 0;
        if (times >= this.myCutpData[i].CLOSE_TIME) {
          if(this.myCutpData[i].BARGAIN_SATUS !=1){
            this.myCutpData[i].BARGAIN_SATUS = 0;
          }
        } else {
          day = parseInt((this.myCutpData[i].CLOSE_TIME-times) / (24 * 60 * 60 * 1000));
          H = parseInt((this.myCutpData[i].CLOSE_TIME-times -day * 24 * 60 * 60 * 1000) /(60 * 60 * 1000));
          M = parseInt((this.myCutpData[i].CLOSE_TIME-times -day * 24 * 60 * 60 * 1000 -H * 60 * 60 * 1000)/(60 * 1000));
          S = parseInt((this.myCutpData[i].CLOSE_TIME-times -day * 24 * 60 * 60 * 1000 -H * 60 * 60 * 1000 -M * 60 * 1000) /1000);
          H=this.filterNum(H);
          M=this.filterNum(M);
          S=this.filterNum(S);
        }
        let downObj={
          day:day,
          H:H,
          M:M,
          S:S
        }
        this.$set(this.myCutpData[i],"times", this.toPayTime(downObj))
        // console.log(this.myCutpData[i])
        // this.$set(this.myCutpData[i], "downObj", {
        //   day: day,
        //   H: H,
        //   M: M,
        //   S: S
        // });
      }
    },
    filterNum(num){
      return num>=10?num:'0'+num;
    },
    toPayTime(times){
      if(!times) return;
      // {{Number(item.downObj.H*60)+Number(item.downObj.M)}}&thinsp;分&thinsp;{{item.downObj.S}}&thinsp;秒
      if(times.day>0){
        return times.day*24+times.H + ' 小时' + times.M + ' 分' + times.S + ' 秒'
      }else{
        if(times.H>0){
          return times.H + ' 小时' + times.M + ' 分' + times.S + ' 秒'
        }else {
          if(times.M>0){
            return times.M + ' 分' + times.S + ' 秒'
          }else{
            if(times.S>0){
              return times.S + ' 秒'
            }
          }
        }
      }
    },
    // 分享接口信息
    //获取微信的配置信息
    getConfig() {
      // let timestamp, nonceStr, signature;
      // let desc = "智能控温加热坐垫告别冬季，不用89，现双十二砍价只需49元";
      // let title = "双十二最强砍价季，让这个冬季不在寒冷";
      let timestamp, nonceStr, signature;
      let desc = this.showShareObj.INTRODUCE;
      let title = this.showShareObj.TITLE;
      let imgUrl = this.showShareObj.ICON
        // "http://121.40.78.200/pic/act/cover/20141123_pt_share_icon.jpg";
      let urls = iosAdroidWx().urls;
      let appid = iosAdroidWx().appid;
      this.$fetchPost(urls,{ url: window.location.href}, {emulateJSON: true }).then(
        res => {
          var data = res;
          // timestamp = data.timestamp;
          // nonceStr =  data.nonceStr;
          // signature = data.signature;
          timestamp = data.NOW_TIME;
          nonceStr = data.NONCESTR;
          signature = data.SKEY;
          // console.log(timestamp,nonceStr,signature,appId)
          wx.config({
            debug: false, // 开启调试模式,false调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: appid, // 必填，公众号的唯一标识
            timestamp: timestamp, // 必填，生成签名的时间戳
            nonceStr: nonceStr, // 必填，生成签名的随机串
            signature: signature, // 必填，签名，见附录1
            jsApiList: [
              "onMenuShareTimeline",
              "onMenuShareAppMessage",
              "chooseWXPay",
              "showOptionMenu"
            ]
          });
          let that = this;
          let linkUrl = location.href;
          wx.ready(function() {
            // 分享给朋友
            wx.onMenuShareAppMessage({
              title: title,
              desc: desc,
              link: linkUrl,
              imgUrl: imgUrl,
              trigger: function(res) {},
              success: function(res) {},
              cancel: function(res) {},
              fail: function(res) {
                alert(JSON.stringify(res));
              }
            });

            //分享朋友圈
            wx.onMenuShareTimeline({
              title: title,
              desc: desc,
              link: linkUrl,
              imgUrl: imgUrl,
              trigger: function(res) {},
              success: function(res) {},
              cancel: function(res) {},
              fail: function(res) {
                alert(JSON.stringify(res));
              }
            });
          });
        },
        err => {}
      );
    },
    // 去支付
    toPay(orderid) {
      // 拿到我的商品的orderid
      this.orderId = orderid;
      this.$fetchPost("/ServOrderWeb/confirmOrderInfo.action", {
        ORDER_ID:this.orderId,
        TYPE:1
      }).then(
        res => {
          if(res.STATUS_CODE ==1) {
            this.orderList = res.ORDER_LIST[0];
            this.getPay();
          }
        },
        err => console.log(err)
      );
    },
    // 封装支付数据
    getPay(){
      if(this.orderList != ""){
        let obj = {};
        obj.COMP_ID = this.orderList.COMP_ID;
        obj.SHOP_NAME = this.orderList.SHOP_NAME;
        obj.SERV_PARAMS= [];
        let objs= {};
        objs.SERV_ID = this.orderList.SERV_PARAMS[0].SERV_ID;
        objs.QUANTITY = this.orderList.SERV_PARAMS[0].QUANTITY;
        objs.SERV_FIRST_CLASS = this.orderList.SERV_PARAMS[0].SERV_FIRST_CLASS;
        objs.SERV_SECON_CLASS = this.orderList.SERV_PARAMS[0].SERV_SECON_CLASS;
        objs.SUPP_CASH_VOL = this.orderList.SERV_PARAMS[0].SUPP_CASH_VOL;
        objs.SUPP_DIS_VOL = this.orderList.SERV_PARAMS[0].SUPP_DIS_VOL;
        objs.SUPP_NOR_CASH_VOL = this.orderList.SERV_PARAMS[0].SUPP_NOR_CASH_VOL;
        objs.SERV_SUBJECT = this.orderList.SERV_PARAMS[0].SERV_SUBJECT;
        objs.PRICE = this.orderList.PRICE;
        objs.MARK =this.orderList.SERV_PARAMS[0].MARK;
        objs.ATTR_LIST = [];
        if(this.orderList.SERV_PARAMS[0].ATTR_LIST != []){
          for(let i=0;i<this.orderList.SERV_PARAMS[0].ATTR_LIST.length;i++){
          let objss={};
          objss.ATTRIBURE=String(this.orderList.SERV_PARAMS[0].ATTR_LIST[i].ATTRIBURE);
          objss.TYPE=this.orderList.SERV_PARAMS[0].ATTR_LIST[i].TYPE;
          objs.ATTR_LIST.push(objss);
          }
        }
        obj.SERV_PARAMS.push(objs);
        let cutGoodObj = {};
        cutGoodObj.USER_ID = this.userId;
        if(this.orderId){
            cutGoodObj.ORDER_ID=this.orderId;//支付需要的orderId
        }
        cutGoodObj.ORDER_LIST = [];
        cutGoodObj.ORDER_LIST.push(obj);
        sessionStorage.removeItem('orderMess');
        sessionStorage.removeItem('distribuVoucher');
        localStorage.removeItem('from');
        sessionStorage.setItem('shopMess',JSON.stringify(cutGoodObj));//商品支付的数据
        // this.$router.push('/shopPay');
        location.href=window.getIps+'/CARNT/jsp/pay/indexM.html#/shopPay';
      }
    },
    // 订单详情
    toOrderDetail(id){//SERV_ORDER_ID
      if(id!=0){
        this.$router.push('/orderDetail/' + id);
      }
    },
    // 砍价详情
    toCutpriceDetail(id){
      this.$router.push('/cutPriceDetail/' + id);
    },
    // 在我的砍价 点击跳转到砍价详情
    toMyCutDetail(item){
      if(item.BARGAIN_SATUS==2 ||item.BARGAIN_SATUS==0){// 砍价中
        this.$router.push('/cutPriceDetail/' + item.ORDER_ID);
      }else if(item.BARGAIN_SATUS==1){// 已完成
        this.$router.push('/orderDetail/' + item.SERV_ORDER_ID);
      }
    }
  },
  // 子组件
  components: {
    XHeader,
    Tab,
    TabItem,
    shareToast
  }
};
</script>
<!--当前页面的样式 -->
<style lang="less" scoped>
@import url("../../assets/css/public.less");
.myScroller {
  top: 1.8rem;
}
.myScroller1 {
  top: 1.65rem;
}
.cutPriceList {
  min-height: 100%;
  background: #fff;
  .header {
    position: fixed;
    top: 0;
    width: 7.5rem;
    z-index: 999;
    .wx {
      width: 0.33rem;
      height: 0.34rem;
    }
    .cutPriceNav {
      .tabLine {
        &:after {
          content: "";
          width: 1px;
          height: 0.56rem;
          background: #e6e6e6;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        }
      }
    }
  }
  .cutPriceGoodsList {
    .cutPriceBanner {
      display: flex;
      img {
        width: 7.5rem;
        height: 3rem;
      }
    }
    .cutPriceListNow {
      background: #fff;
      .cutPriceListNowTitle {
        height: 0.5rem;
        display: flex;
        margin-top: 0.3rem;
        justify-content: center;
        img {
          width: 2.26rem;
          height: 0.29rem;
        }
      }
      .cutPriceListNowInfo {
        width: 7rem;
        margin: 0.15rem auto;
        .borderFu(#e1e1e1,10px);
        .cutPriceListNowInfo1 {
          height: 3rem;
          position: relative;
          img {
            width: 7rem;
            height: 3rem;
          }
          .cutPriceListNowDeposit {
            border-top-right-radius: 0.2rem;
            border-bottom-right-radius: 0.2rem;
            position: absolute;
            left: 0;
            top: 0.32rem;
            overflow: hidden;
            p {
              font-size: 0.26rem;
              color: #fff;
              display: table-cell;
              vertical-align: middle;
            }
            .deposit1 {
              width: 1.56rem;
              height: 0.4rem;
              background: url("../../assets/image/cutPrice/bg1.jpg") no-repeat;
              background-size: 1.56rem 0.4rem;
            }
            .deposit2 {
              width: 1.66rem;
              height: 0.4rem;
              background: url("../../assets/image/cutPrice/bg1.jpg") no-repeat;
              background-size: 1.66rem 0.4rem;
            }
            .deposit3 {
              width: 1.76rem;
              height: 0.4rem;
              background: url("../../assets/image/cutPrice/bg1.jpg") no-repeat;
              background-size: 1.76rem 0.4rem;
            }
            .deposit4 {
              width: 2rem;
              height: 0.4rem;
              background: url("../../assets/image/cutPrice/bg1.jpg") no-repeat;
              background-size: 2rem 0.4rem;
            }
          }
        }
        .cutPriceListNowInfo2 {
          display: flex;
          align-items: center;
          .cutPriceListNowInfo2Left {
            width: 5.16rem;
            padding: 0.1rem 0.21rem 0.1rem 0.21rem;
            p{
              font-size: 0.3rem;
              color: #222;
              text-align: left;
              // margin-bottom: 0.12rem;
            }
            div{
              font-size: 0.28rem;
              color: #888;
              text-align: left;
              display: flex;
              flex-direction: row;
              align-items:flex-end;
              span:nth-of-type(1){
                text-align: bottom;
              }
              p:nth-of-type(1) {
                font-size: 0.28rem;
                color: #ee1812;
                display: flex;
                align-items:flex-end;
                margin-bottom: 0;
                span:nth-child(2){
                  font-size: 0.36rem;
                  vertical-align: text-top;
                }
              }
              p:nth-of-type(2) {
                color:#999999;
                text-decoration: line-through;
              }
            }
          }
          > p {
            width: 1.6rem;
            height: 0.6rem;
            border-radius: 0.3rem;
            background: #f22e2e;
            font-size: 0.28rem;
            color: #fff;
            line-height: 0.6rem;
            z-index: 10;
          }
        }
      }
    }
    .cutPriceListPast {
      background: #fff;
      .cutPriceListPastTitle {
        height: 0.5rem;
        display: flex;
        justify-content: center;
        margin-top: 0.25rem;
        img {
          width: 2.26rem;
          height: 0.29rem;
        }
      }
      .cutPriceListPastInfo {
        width: 7rem;
        margin: 0.15rem auto;
        .borderFu(#e1e1e1,0);
        .cutPriceListPastInfo1 {
          height: 3rem;
          position: relative;
          img {
            width: 7rem;
            height: 3rem;
          }
          .cutPriceListPastDeposit {
            border-top-right-radius: 0.2rem;
            border-bottom-right-radius: 0.2rem;
            position: absolute;
            left: 0;
            top: 0.32rem;
            overflow: hidden;
            p {
              font-size: 0.26rem;
              color: #fff;
              display: table-cell;
              vertical-align: middle;
            }
            .joinNum1 {
              width: 1.56rem;
              height: 0.4rem;
              background: url("../../assets/image/cutPrice/bg1.jpg") no-repeat;
              background-size: 1.56rem 0.4rem;
            }
            .joinNum2 {
              width: 1.66rem;
              height: 0.4rem;
              background: url("../../assets/image/cutPrice/bg1.jpg") no-repeat;
              background-size: 1.66rem 0.4rem;
            }
            .joinNum3 {
              width: 1.76rem;
              height: 0.4rem;
              background: url("../../assets/image/cutPrice/bg1.jpg") no-repeat;
              background-size: 1.76rem 0.4rem;
            }
            .joinNum4 {
              width: 2rem;
              height: 0.4rem;
              background: url("../../assets/image/cutPrice/bg1.jpg") no-repeat;
              background-size: 2rem 0.4rem;
            }
          }
        }
        .cutPriceListPastInfo2 {
          display: flex;
          align-items: center;
          .cutPriceListPastInfo2Left {
            width: 5.16rem;
            padding: 0.1rem 0.21rem 0.1rem 0.21rem;
            p{
              font-size: 0.3rem;
              color: #222;
              text-align: left;
              // margin-bottom: 0.12rem;
            }
            div{
              font-size: 0.28rem;
              color: #888;
              text-align: left;
              display: flex;
              flex-direction: row;
              align-items:flex-end;
              span:nth-of-type(1){
                text-align: bottom;
              }
              p:nth-of-type(1) {
                font-size: 0.28rem;
                color: #ee1812;
                display: flex;
                align-items:flex-end;
                margin-bottom: 0;
                span:nth-child(2){
                  font-size: 0.36rem;
                  vertical-align: text-top;
                }
              }
              p:nth-of-type(2) {
                color:#999999;
                text-decoration: line-through;
              }
            }
          }
          > p {
            width: 1.6rem;
            height: 0.6rem;
            border-radius: 0.3rem;
            background: #f22e2e;
            font-size: 0.28rem;
            color: #fff;
            line-height: 0.6rem;
            z-index: 10;
          }
        }
      }
      .cutPriceListNo {
        position: relative;
        height: 0.6rem;
        margin-bottom: -1rem;
        z-index: 999;
        padding-top: 0.3rem;
        .noMoreLine {
          width: 2.9rem;
          margin: 0 auto;
          height: 0.02rem;
          background: #777;
          transform: scaleY(0.5);
        }
        span {
          font-size: 0.22rem;
          color: #666;
          padding: 0 0.1rem;
          position: absolute;
          background: #fff;
          transform: translate(-50%, -50%);
        }
      }
    }
    .noCutPriceListPast {
      background: #fff;
      .cutPriceListPastTitle {
        height: 0.5rem;
        display: flex;
        justify-content: center;
        margin-top: 0.25rem;
        img {
          width: 2.26rem;
          height: 0.29rem;
        }
      }
      p {
        margin: 0.5rem 0 0 0;
        font-size: 0.3rem;
        color: #666;
      }
    }
  }
  .myCutPrices {
    .myCutPriceLists {
      width: 7.49rem;
      .myCutPriceInfo {
        position: relative;
        display: flex;
        align-items: center;
        .myCutPriceInfoL {
          width: 1.72rem;
          height: 100%;
          display: flex;
          justify-content: flex-end;
          img {
            align-self: center;
            width: 1.14rem;
            height: 1.37rem;
            display: block;
            margin-top: 0.24rem;
          }
        }
        .myCutPriceInfoR {
          width: 5.77rem;
          text-align: left;
          padding: 0.35rem 0.39rem 0.18rem 0.39rem;
          p:nth-child(1) {
            font-size: 0.3rem;
            color: #222;
          }
          p:nth-child(2) {
            font-size: 0.24rem;
            color: #fa4040;
            margin-top: 0.14rem;
          }
          .myCutPriceInfoRc{
            font-size: 0.24rem;
            color: #999;
            margin-top: 0.48rem;
          }
          .myCutPriceInfoRd{
            font-size: 0.24rem;
            color: #999;
            margin-top: 0.48rem;
            span{
              font-size: 0.28rem;
              color:#F22E2E;
            }
          }
        }
        .myCutPriceInfoLine {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          bottom: 0;
          width: 6.7rem;
          height: 1px;
          border-bottom: 1px dashed #ddd;
        }
      }
      .myCutPriceStatus1 {
        width: 7.5rem;
        height: 0.88rem;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 0.2rem 0 0.37rem;
        p:nth-child(1) {
          font-size: 0.28rem;
          color: #66cc22;
        }
        p:nth-child(2) {
          height: 0.5rem;
          .borderFu(#F22E2E,25px);
          font-size: 0.26rem;
          color: #f22e2e;
          line-height: 0.5rem;
          padding: 0 0.2rem;
        }
      }
      .myCutPriceStatus2 {
        width: 7.5rem;
        height: 0.88rem;
        position: relative;
        p:nth-child(1) {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          float: left;
          font-size: 0.28rem;
          color: #666;
          margin-left: 0.37rem;
        }
        p:nth-child(2) {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          float: right;
          width: 1.36rem;
          height: 0.5rem;
          .borderFu(#999,25px);
          font-size: 0.26rem;
          color: #666;
          line-height: 0.5rem;
          margin-right: 0.2rem;
        }
      }
      .myCutPriceStatus3 {
        width: 7.5rem;
        height: 0.88rem;
        position: relative;
        p:nth-child(1) {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          float: left;
          font-size: 0.28rem;
          color: #666;
          margin-left: 0.37rem;
        }
        p:nth-child(2) {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          float: right;
          width: 1.36rem;
          height: 0.5rem;
          .borderFu(#999,25px);
          font-size: 0.26rem;
          color: #666;
          line-height: 0.5rem;
          margin-right: 0.2rem;
        }
        p:nth-child(3) {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          float: right;
          width: 1.36rem;
          height: 0.5rem;
          .borderFu(#999,25px);
          font-size: 0.26rem;
          color: #666;
          line-height: 0.5rem;
          margin-right: 0.2rem;
        }
      }
      .myCutPriceListBlank {
        height: 0.2rem;
        background: #eff0f5;
      }
    }
    .myPriceListNo {
      position: relative;
      height: 0.6rem;
      margin-bottom: -1rem;
      z-index: 999;
      padding-top: 0.3rem;
      .noMoreLine {
        width: 2.9rem;
        margin: 0 auto;
        height: 0.02rem;
        background: #777;
        transform: scaleY(0.5);
      }
      span {
        font-size: 0.22rem;
        color: #666;
        padding: 0 0.1rem;
        position: absolute;
        background: #fff;
        transform: translate(-50%, -50%);
      }
    }
    .noMyCutcont{
      position: fixed;
      top: 50%;
      left: 50%;
      height: 1.64rem;
      width: 5rem;
      transform:translate(-50%,-50%);
      img{
        height: 1.64rem;
        width: 1.9rem;
        display: block;
        margin: 0 auto;
      }
      p{
        font-size: 0.26rem;
        color: #999;
        padding-top: 0.2rem;
      }
    }
  }
}
</style>
